<template>
  <div id="MyintegralDetail" class="lot_det" style="width: 100%; background: rgb(255, 255, 255); height: 100%; padding: 20px; margin: 0px; border: 0px; text-align: left;">
    <link rel="stylesheet" href="/assstatic/css/lot_detail.css">
    <div class="title">
      <i></i>
      <span>任务基本信息</span>
    </div>
    <div class="detail clearfix">
      <ul>
        <li v-for="(val,key,index) in item" :key="val+index+'y'" v-if="index<4">
          <span>{{key}}</span>
          <label :title="val">
            <i>{{val}}</i>
          </label>
        </li>
      </ul>
      <ul>
        <li v-for="(val,key,index) in item" :key="val+index+'x'" v-if="index>3">
          <span>{{key}}</span>
          <label>
            <em v-if="val=='不予结算'">
              {{val}}
              <div class="tips" :title="reason">{{reason}}</div>
            </em>
            <i v-else>{{val}}</i>
          </label>
        </li>
      </ul>
    </div>
    <div v-if="bad!=null" class="title">
      <i></i>
      <span>坏数据占比</span>
    </div>
    <div v-if="bad!=null" class="detail clearfix">
      <ul>
        <li>
          <span>坏数据条数</span>
          <label>
            <i>{{bad.badCount}}</i>
          </label>
        </li>
      </ul>
      <ul>
        <li>
          <span>坏数据占比</span>
          <label>
            <i>{{bad.badCountRatio}}</i>
          </label>
        </li>
      </ul>
    </div>
    <div class="title">
      <i></i>
      <span>文件列表</span>
      <div class="sea-lt">
        <input type name placeholder="请输入文件名称" v-model="postData.fileName" />
        <a class="ser-btn" v-on:click="search">查询</a>
      </div>
    </div>
    <div class="noneresult" v-if="contentNull">暂无数据</div>
    <div class="table con-list" v-else>
      <table width="100%">
        <thead>
          <tr>
            <td>文件名称</td>
            <td>正确率</td>
            <td>操作</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="ob in list" :key="ob.name">
            <td>{{ob.name}}</td>
            <td>{{ob.accuracyRate | toPercentage}}</td>
            <td>
              <a class="rem-btn" v-on:click="seeresult(ob)">查看结果</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="pagesize" id="pagesize" v-if="!contentNull"></div>
  </div>
</template>
<script>
export default {
  name:"MyintegralDetail",
  data(){
    return{
      item:null,
      taskId:'',
      markTaskId:'',
      cycle:'',
      integralId:'',
      bad:null,
      reason:null,
      list: null,
      pageSize: 10,
      contentNull: false,
      postData: {
          fileName: ''
      }
    };
  },
  created(){
    this.taskId = this.Utils.getQueryStringArgs().taskId;
    this.markTaskId = this.Utils.getQueryStringArgs().markTaskId;
    this.cycle = this.Utils.getQueryStringArgs().cycle;
    this.integralId = this.Utils.getQueryStringArgs().id;
  },
  mounted: function() {
      let self = this;
      let proxyurl = '/v1/web/batch-marktask-integral/detail?selectType=my_integral&markTaskId=' + this.markTaskId + '&cycle=' + this.cycle + '&integralId='+this.integralId;
      this.$api
          .method(proxyurl, {}, "GET")
          .then(data => {
            if (data == undefined || data == "") {
              return;
            }
           if (data.rt.status == 200) {
              self.item = data.data.result;
              if(("badCount" in data.data.extend)){
                  self.bad = data.data.extend;
              }
              if(("reason" in data.data.extend)){
                  self.reason = data.data.extend.reason;
              }
              self.search();
            } else {
                self.$message(data.rt.status);
            }
          })
          .catch(err => {
            console.log(err);
          });
  },
  methods: {
      search() {
          let self = this;
          self.postData['taskId'] = self.taskId;
          self.postData['markTaskId'] = self.markTaskId;
          self.PageNav.load(1,self.pageSize,"/v1/marker-task-data/info/file",self.postData,function(data) {
            if (data.list == undefined || data.list == null || data.list == "") {
                self.list = null;
                self.contentNull = true;
            } else {
                self.list = data.list;
                self.contentNull = false;
            }
            self.pageSize = data.pageSize == 0 ? 10 : data.pageSize;
            }
          );
      },
      seeresult: function(flag) { //查看结果
          var url = "/assets/home/result-page/?markTaskId=" + this.markTaskId + '&taskId=' + this.taskId + '&fileid=' + flag.fileId;
          window.open(url, 'markresult-myintegral');
      },
  },
  filters:{
    toPercentage:function(value) {
        var f = parseFloat(value);
        if (isNaN(f)) {
            return "--";
        }
        var rate = (parseInt(Number(value) * 10000) / 100).toFixed(2);
        return rate + "%";
    }
  }
}
</script>